<template>
  <div class="demo">
    <div class="demo-title">联动</div>
    <div class="demo-content">
      <Space>
        <Select
          v-model:value="state.province"
          style="width: 120px"
          :options="state.provinceData.map((pro) => ({ value: pro }))"
        />
        <Select
          v-model:value="state.secondCity"
          style="width: 120px"
          :options="cities.map((city) => ({ value: city }))"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, computed, watch } from 'vue';
  import Space from '@sscd/space';
  import Select from '@sscd/select';
  const provinceData = ['Zhejiang', 'Jiangsu'];
  const cityData = {
    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
  };
  const province = provinceData[0];
  const state = reactive({
    province,
    provinceData,
    cityData,
    secondCity: cityData[province][0],
  });
  const cities = computed(() => cityData[state.province]);
  watch(
    () => state.province,
    (val) => {
      state.secondCity = state.cityData[val][0] as any;
    }
  );
</script>
